<div class="card-wrapper position-relative" [class.hover-3d]="hover3d">
  <div class="card-container" [ngClass]="{ premium: name === 'Premium' }">
    <a
      class="card-item d-flex flex-column justify-content-between p-4"
      [routerLink]="routerLinkPricing"
    >
      @if (hover3d) {
        @for (zone of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track zone) {
          <span class="hover-zone position-absolute"></span>
        }
      }
      <div class="d-flex justify-content-end">
        <gf-logo
          size="large"
          [ngClass]="{ 'text-muted': name === 'Basic' }"
          [showLabel]="false"
        />
      </div>
      @if (hasPermissionToCreateApiKey) {
        <div class="mt-5">
          <div class="heading text-muted" i18n>API Key</div>
          <div class="align-items-center d-flex">
            <div class="text-monospace value">* * * * * * * * *</div>
            <div class="ml-1">
              <button
                class="bg-transparent no-min-width"
                i18n-title
                mat-button
                title="Generate Ghostfolio Premium Data Provider API key for self-hosted environments..."
                (click)="onGenerateApiKey($event)"
              >
                <ion-icon name="refresh-outline" />
              </button>
            </div>
          </div>
        </div>
      }
      <div class="d-flex justify-content-between">
        <div>
          <div class="heading text-muted" i18n>Membership</div>
          <div class="text-truncate value">{{ name }}</div>
        </div>
        @if (expiresAt) {
          <div>
            <div class="heading text-muted" i18n>Valid until</div>
            <div class="text-truncate value">
              {{ expiresAt }}
            </div>
          </div>
        }
      </div>
    </a>
  </div>
</div>
